<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="设备ID" prop="deviceId">
        <el-input v-model="formData.deviceId" placeholder="请输入设备ID" />
      </el-form-item>
      <el-form-item label="端口描述类型" prop="portDescrType">
        <el-select v-model="formData.portDescrType" placeholder="请选择端口描述类型">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="端口描述详情" prop="portDescrDescr">
        <el-input v-model="formData.portDescrDescr" placeholder="请输入端口描述详情" />
      </el-form-item>
      <el-form-item label="端口描述电路信息" prop="portDescrCircuit">
        <el-input v-model="formData.portDescrCircuit" placeholder="请输入端口描述电路信息" />
      </el-form-item>
      <el-form-item label="端口描述速度" prop="portDescrSpeed">
        <el-input v-model="formData.portDescrSpeed" placeholder="请输入端口描述速度" />
      </el-form-item>
      <el-form-item label="端口描述备注" prop="portDescrNotes">
        <el-input v-model="formData.portDescrNotes" placeholder="请输入端口描述备注" />
      </el-form-item>
      <el-form-item label="接口描述" prop="ifDescr">
        <el-input v-model="formData.ifDescr" placeholder="请输入接口描述" />
      </el-form-item>
      <el-form-item label="网络接口名称" prop="ifName">
        <el-input v-model="formData.ifName" placeholder="请输入网络接口名称" />
      </el-form-item>
      <el-form-item label="端口名称" prop="portName">
        <el-input v-model="formData.portName" placeholder="请输入端口名称" />
      </el-form-item>
      <el-form-item label="接口索引" prop="ifIndex">
        <el-input v-model="formData.ifIndex" placeholder="请输入接口索引" />
      </el-form-item>
      <el-form-item label="接口速度" prop="ifSpeed">
        <el-input v-model="formData.ifSpeed" placeholder="请输入接口速度" />
      </el-form-item>
      <el-form-item label="上一次接口速度" prop="ifspeedPrev">
        <el-input v-model="formData.ifspeedPrev" placeholder="请输入上一次接口速度" />
      </el-form-item>
      <el-form-item label="接口连接器是否存在" prop="ifConnectorPresent">
        <el-input v-model="formData.ifConnectorPresent" placeholder="请输入接口连接器是否存在" />
      </el-form-item>
      <el-form-item label="接口操作状态" prop="ifOperStatus">
        <el-radio-group v-model="formData.ifOperStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接口上一次操作状态" prop="ifoperstatusPrev">
        <el-input v-model="formData.ifoperstatusPrev" placeholder="请输入接口上一次操作状态" />
      </el-form-item>
      <el-form-item label="接口管理状态" prop="ifAdminStatus">
        <el-radio-group v-model="formData.ifAdminStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接口上一次管理状态" prop="ifadminstatusPrev">
        <el-input v-model="formData.ifadminstatusPrev" placeholder="请输入接口上一次管理状态" />
      </el-form-item>
      <el-form-item label="接口双工模式" prop="ifDuplex">
        <el-input v-model="formData.ifDuplex" placeholder="请输入接口双工模式" />
      </el-form-item>
      <el-form-item label="接口最大传输单元" prop="ifMtu">
        <el-input v-model="formData.ifMtu" placeholder="请输入接口最大传输单元" />
      </el-form-item>
      <el-form-item label="接口类型" prop="ifType">
        <el-select v-model="formData.ifType" placeholder="请选择接口类型">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="接口别名" prop="ifAlias">
        <el-input v-model="formData.ifAlias" placeholder="请输入接口别名" />
      </el-form-item>
      <el-form-item label="接口物理地址" prop="ifPhysAddress">
        <el-input v-model="formData.ifPhysAddress" placeholder="请输入接口物理地址" />
      </el-form-item>
      <el-form-item label="接口最后更改时间" prop="ifLastChange">
        <el-input v-model="formData.ifLastChange" placeholder="请输入接口最后更改时间" />
      </el-form-item>
      <el-form-item label="接口 VLAN 信息" prop="ifVlan">
        <el-input v-model="formData.ifVlan" placeholder="请输入接口 VLAN 信息" />
      </el-form-item>
      <el-form-item label="接口链路聚合信息" prop="ifTrunk">
        <el-input v-model="formData.ifTrunk" placeholder="请输入接口链路聚合信息" />
      </el-form-item>
      <el-form-item label="接口虚拟路由转发信息" prop="ifVrf">
        <el-input v-model="formData.ifVrf" placeholder="请输入接口虚拟路由转发信息" />
      </el-form-item>
      <el-form-item label="是否忽略标识" prop="ignore">
        <el-radio-group v-model="formData.ignore">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否禁用标识" prop="disabled">
        <el-radio-group v-model="formData.disabled">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="PAgP 操作模式" prop="pagpOperationMode">
        <el-input v-model="formData.pagpOperationMode" placeholder="请输入PAgP 操作模式" />
      </el-form-item>
      <el-form-item label="PAgP 端口状态" prop="pagpPortState">
        <el-input v-model="formData.pagpPortState" placeholder="请输入PAgP 端口状态" />
      </el-form-item>
      <el-form-item label="PAgP 对端设备 ID" prop="pagpPartnerDeviceId">
        <el-input v-model="formData.pagpPartnerDeviceId" placeholder="请输入PAgP 对端设备 ID" />
      </el-form-item>
      <el-form-item label="PAgP 对端学习方法" prop="pagpPartnerLearnMethod">
        <el-input v-model="formData.pagpPartnerLearnMethod" placeholder="请输入PAgP 对端学习方法" />
      </el-form-item>
      <el-form-item label="PAgP 对端接口索引" prop="pagpPartnerIfIndex">
        <el-input v-model="formData.pagpPartnerIfIndex" placeholder="请输入PAgP 对端接口索引" />
      </el-form-item>
      <el-form-item label="PAgP 对端组接口索引" prop="pagpPartnerGroupIfIndex">
        <el-input v-model="formData.pagpPartnerGroupIfIndex" placeholder="请输入PAgP 对端组接口索引" />
      </el-form-item>
      <el-form-item label="PAgP 对端设备名称" prop="pagpPartnerDeviceName">
        <el-input v-model="formData.pagpPartnerDeviceName" placeholder="请输入PAgP 对端设备名称" />
      </el-form-item>
      <el-form-item label="PAgP 以太网通道操作模式" prop="pagpEthcOperationMode">
        <el-input v-model="formData.pagpEthcOperationMode" placeholder="请输入PAgP 以太网通道操作模式" />
      </el-form-item>
      <el-form-item label="PAgP 设备 ID" prop="pagpDeviceId">
        <el-input v-model="formData.pagpDeviceId" placeholder="请输入PAgP 设备 ID" />
      </el-form-item>
      <el-form-item label="PAgP 组接口索引" prop="pagpGroupIfIndex">
        <el-input v-model="formData.pagpGroupIfIndex" placeholder="请输入PAgP 组接口索引" />
      </el-form-item>
      <el-form-item label="入站单播数据包数量" prop="ifInUcastPkts">
        <el-input v-model="formData.ifInUcastPkts" placeholder="请输入入站单播数据包数量" />
      </el-form-item>
      <el-form-item label="上一次入站单播数据包数量" prop="ifinucastpktsPrev">
        <el-input v-model="formData.ifinucastpktsPrev" placeholder="请输入上一次入站单播数据包数量" />
      </el-form-item>
      <el-form-item label="入站单播数据包数量差值" prop="ifinucastpktsDelta">
        <el-input v-model="formData.ifinucastpktsDelta" placeholder="请输入入站单播数据包数量差值" />
      </el-form-item>
      <el-form-item label="入站单播数据包速率" prop="ifinucastpktsRate">
        <el-input v-model="formData.ifinucastpktsRate" placeholder="请输入入站单播数据包速率" />
      </el-form-item>
      <el-form-item label="出站单播数据包数量" prop="ifOutUcastPkts">
        <el-input v-model="formData.ifOutUcastPkts" placeholder="请输入出站单播数据包数量" />
      </el-form-item>
      <el-form-item label="上一次出站单播数据包数量" prop="ifoutucastpktsPrev">
        <el-input v-model="formData.ifoutucastpktsPrev" placeholder="请输入上一次出站单播数据包数量" />
      </el-form-item>
      <el-form-item label="出站单播数据包数量差值" prop="ifoutucastpktsDelta">
        <el-input v-model="formData.ifoutucastpktsDelta" placeholder="请输入出站单播数据包数量差值" />
      </el-form-item>
      <el-form-item label="出站单播数据包速率" prop="ifoutucastpktsRate">
        <el-input v-model="formData.ifoutucastpktsRate" placeholder="请输入出站单播数据包速率" />
      </el-form-item>
      <el-form-item label="入站错误数据包数量" prop="ifInErrors">
        <el-input v-model="formData.ifInErrors" placeholder="请输入入站错误数据包数量" />
      </el-form-item>
      <el-form-item label="上一次入站错误数据包数量" prop="ifinerrorsPrev">
        <el-input v-model="formData.ifinerrorsPrev" placeholder="请输入上一次入站错误数据包数量" />
      </el-form-item>
      <el-form-item label="入站错误数据包数量差值" prop="ifinerrorsDelta">
        <el-input v-model="formData.ifinerrorsDelta" placeholder="请输入入站错误数据包数量差值" />
      </el-form-item>
      <el-form-item label="入站错误数据包速率（单位：包/秒）" prop="ifinerrorsRate">
        <el-input v-model="formData.ifinerrorsRate" placeholder="请输入入站错误数据包速率（单位：包/秒）" />
      </el-form-item>
      <el-form-item label="出站错误数据包数量。" prop="ifOutErrors">
        <el-input v-model="formData.ifOutErrors" placeholder="请输入出站错误数据包数量。" />
      </el-form-item>
      <el-form-item label="上一次出站错误数据包数量。" prop="ifouterrorsPrev">
        <el-input v-model="formData.ifouterrorsPrev" placeholder="请输入上一次出站错误数据包数量。" />
      </el-form-item>
      <el-form-item label="出站错误数据包数量差值。" prop="ifouterrorsDelta">
        <el-input v-model="formData.ifouterrorsDelta" placeholder="请输入出站错误数据包数量差值。" />
      </el-form-item>
      <el-form-item label="出站错误数据包速率（单位：包/秒）。" prop="ifouterrorsRate">
        <el-input v-model="formData.ifouterrorsRate" placeholder="请输入出站错误数据包速率（单位：包/秒）。" />
      </el-form-item>
      <el-form-item label="入站字节数（流量统计）" prop="ifInOctets">
        <el-input v-model="formData.ifInOctets" placeholder="请输入入站字节数（流量统计）" />
      </el-form-item>
      <el-form-item label="上一次入站字节数。" prop="ifinoctetsPrev">
        <el-input v-model="formData.ifinoctetsPrev" placeholder="请输入上一次入站字节数。" />
      </el-form-item>
      <el-form-item label="入站字节数差值。" prop="ifinoctetsDelta">
        <el-input v-model="formData.ifinoctetsDelta" placeholder="请输入入站字节数差值。" />
      </el-form-item>
      <el-form-item label="入站流量速率（单位：字节/秒）。" prop="ifinoctetsRate">
        <el-input v-model="formData.ifinoctetsRate" placeholder="请输入入站流量速率（单位：字节/秒）。" />
      </el-form-item>
      <el-form-item label="出站字节数。" prop="ifOutOctets">
        <el-input v-model="formData.ifOutOctets" placeholder="请输入出站字节数。" />
      </el-form-item>
      <el-form-item label="上一次出站字节数。" prop="ifoutoctetsPrev">
        <el-input v-model="formData.ifoutoctetsPrev" placeholder="请输入上一次出站字节数。" />
      </el-form-item>
      <el-form-item label="出站字节数差值。" prop="ifoutoctetsDelta">
        <el-input v-model="formData.ifoutoctetsDelta" placeholder="请输入出站字节数差值。" />
      </el-form-item>
      <el-form-item label="出站流量速率（单位：字节/秒）。" prop="ifoutoctetsRate">
        <el-input v-model="formData.ifoutoctetsRate" placeholder="请输入出站流量速率（单位：字节/秒）。" />
      </el-form-item>
      <el-form-item label="最后一次轮询时间（时间戳）。" prop="pollTime">
        <el-date-picker
          v-model="formData.pollTime"
          type="date"
          value-format="x"
          placeholder="选择最后一次轮询时间（时间戳）。"
        />
      </el-form-item>
      <el-form-item label="上一次轮询时间。" prop="pollPrev">
        <el-input v-model="formData.pollPrev" placeholder="请输入上一次轮询时间。" />
      </el-form-item>
      <el-form-item label="轮询间隔时间（秒）。" prop="pollPeriod">
        <el-input v-model="formData.pollPeriod" placeholder="请输入轮询间隔时间（秒）。" />
      </el-form-item>
      <el-form-item label="是否是关联链路0否1是" prop="isCritical">
        <el-input v-model="formData.isCritical" placeholder="请输入是否是关联链路0否1是" />
      </el-form-item>
      <el-form-item label="是否展示0否1是" prop="isShow">
        <el-radio-group v-model="formData.isShow">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="实际上行带宽" prop="bandwidth">
        <el-input v-model="formData.bandwidth" placeholder="请输入实际上行带宽" />
      </el-form-item>
      <el-form-item label="入站丢包数量" prop="ifInLoss">
        <el-input v-model="formData.ifInLoss" placeholder="请输入入站丢包数量" />
      </el-form-item>
      <el-form-item label="出站丢包数量" prop="ifOutLoss">
        <el-input v-model="formData.ifOutLoss" placeholder="请输入出站丢包数量" />
      </el-form-item>
      <el-form-item label="接口非单播包转发数（in）" prop="ifInNoUnicastForward">
        <el-input v-model="formData.ifInNoUnicastForward" placeholder="请输入接口非单播包转发数（in）" />
      </el-form-item>
      <el-form-item label="接口非单播包转发数（out）" prop="ifOutNoUnicastForward">
        <el-input v-model="formData.ifOutNoUnicastForward" placeholder="请输入接口非单播包转发数（out）" />
      </el-form-item>
      <el-form-item label="丢弃的未知协议包" prop="ifUnknownDrop">
        <el-input v-model="formData.ifUnknownDrop" placeholder="请输入丢弃的未知协议包" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { PortsApi, Ports } from '@/api/business/ports'

/** 端口 表单 */
defineOptions({ name: 'PortsForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  portId: undefined,
  deviceId: undefined,
  portDescrType: undefined,
  portDescrDescr: undefined,
  portDescrCircuit: undefined,
  portDescrSpeed: undefined,
  portDescrNotes: undefined,
  ifDescr: undefined,
  ifName: undefined,
  portName: undefined,
  ifIndex: undefined,
  ifSpeed: undefined,
  ifspeedPrev: undefined,
  ifConnectorPresent: undefined,
  ifOperStatus: undefined,
  ifoperstatusPrev: undefined,
  ifAdminStatus: undefined,
  ifadminstatusPrev: undefined,
  ifDuplex: undefined,
  ifMtu: undefined,
  ifType: undefined,
  ifAlias: undefined,
  ifPhysAddress: undefined,
  ifLastChange: undefined,
  ifVlan: undefined,
  ifTrunk: undefined,
  ifVrf: undefined,
  ignore: undefined,
  disabled: undefined,
  pagpOperationMode: undefined,
  pagpPortState: undefined,
  pagpPartnerDeviceId: undefined,
  pagpPartnerLearnMethod: undefined,
  pagpPartnerIfIndex: undefined,
  pagpPartnerGroupIfIndex: undefined,
  pagpPartnerDeviceName: undefined,
  pagpEthcOperationMode: undefined,
  pagpDeviceId: undefined,
  pagpGroupIfIndex: undefined,
  ifInUcastPkts: undefined,
  ifinucastpktsPrev: undefined,
  ifinucastpktsDelta: undefined,
  ifinucastpktsRate: undefined,
  ifOutUcastPkts: undefined,
  ifoutucastpktsPrev: undefined,
  ifoutucastpktsDelta: undefined,
  ifoutucastpktsRate: undefined,
  ifInErrors: undefined,
  ifinerrorsPrev: undefined,
  ifinerrorsDelta: undefined,
  ifinerrorsRate: undefined,
  ifOutErrors: undefined,
  ifouterrorsPrev: undefined,
  ifouterrorsDelta: undefined,
  ifouterrorsRate: undefined,
  ifInOctets: undefined,
  ifinoctetsPrev: undefined,
  ifinoctetsDelta: undefined,
  ifinoctetsRate: undefined,
  ifOutOctets: undefined,
  ifoutoctetsPrev: undefined,
  ifoutoctetsDelta: undefined,
  ifoutoctetsRate: undefined,
  pollTime: undefined,
  pollPrev: undefined,
  pollPeriod: undefined,
  isCritical: undefined,
  isShow: undefined,
  bandwidth: undefined,
  ifInLoss: undefined,
  ifOutLoss: undefined,
  ifInNoUnicastForward: undefined,
  ifOutNoUnicastForward: undefined,
  ifUnknownDrop: undefined,
})
const formRules = reactive({
  deviceId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }],
  ifLastChange: [{ required: true, message: '接口最后更改时间不能为空', trigger: 'blur' }],
  ifVrf: [{ required: true, message: '接口虚拟路由转发信息不能为空', trigger: 'blur' }],
  ignore: [{ required: true, message: '是否忽略标识不能为空', trigger: 'blur' }],
  disabled: [{ required: true, message: '是否禁用标识不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await PortsApi.getPorts(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as Ports
    if (formType.value === 'create') {
      await PortsApi.createPorts(data)
      message.success(t('common.createSuccess'))
    } else {
      await PortsApi.updatePorts(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    portId: undefined,
    deviceId: undefined,
    portDescrType: undefined,
    portDescrDescr: undefined,
    portDescrCircuit: undefined,
    portDescrSpeed: undefined,
    portDescrNotes: undefined,
    ifDescr: undefined,
    ifName: undefined,
    portName: undefined,
    ifIndex: undefined,
    ifSpeed: undefined,
    ifspeedPrev: undefined,
    ifConnectorPresent: undefined,
    ifOperStatus: undefined,
    ifoperstatusPrev: undefined,
    ifAdminStatus: undefined,
    ifadminstatusPrev: undefined,
    ifDuplex: undefined,
    ifMtu: undefined,
    ifType: undefined,
    ifAlias: undefined,
    ifPhysAddress: undefined,
    ifLastChange: undefined,
    ifVlan: undefined,
    ifTrunk: undefined,
    ifVrf: undefined,
    ignore: undefined,
    disabled: undefined,
    pagpOperationMode: undefined,
    pagpPortState: undefined,
    pagpPartnerDeviceId: undefined,
    pagpPartnerLearnMethod: undefined,
    pagpPartnerIfIndex: undefined,
    pagpPartnerGroupIfIndex: undefined,
    pagpPartnerDeviceName: undefined,
    pagpEthcOperationMode: undefined,
    pagpDeviceId: undefined,
    pagpGroupIfIndex: undefined,
    ifInUcastPkts: undefined,
    ifinucastpktsPrev: undefined,
    ifinucastpktsDelta: undefined,
    ifinucastpktsRate: undefined,
    ifOutUcastPkts: undefined,
    ifoutucastpktsPrev: undefined,
    ifoutucastpktsDelta: undefined,
    ifoutucastpktsRate: undefined,
    ifInErrors: undefined,
    ifinerrorsPrev: undefined,
    ifinerrorsDelta: undefined,
    ifinerrorsRate: undefined,
    ifOutErrors: undefined,
    ifouterrorsPrev: undefined,
    ifouterrorsDelta: undefined,
    ifouterrorsRate: undefined,
    ifInOctets: undefined,
    ifinoctetsPrev: undefined,
    ifinoctetsDelta: undefined,
    ifinoctetsRate: undefined,
    ifOutOctets: undefined,
    ifoutoctetsPrev: undefined,
    ifoutoctetsDelta: undefined,
    ifoutoctetsRate: undefined,
    pollTime: undefined,
    pollPrev: undefined,
    pollPeriod: undefined,
    isCritical: undefined,
    isShow: undefined,
    bandwidth: undefined,
    ifInLoss: undefined,
    ifOutLoss: undefined,
    ifInNoUnicastForward: undefined,
    ifOutNoUnicastForward: undefined,
    ifUnknownDrop: undefined,
  }
  formRef.value?.resetFields()
}
</script>